<template>
    <div class="infinite-list-wrapper">
        <div
                class="listCard"
                style="height: 100%;overflow: auto"
                v-infinite-scroll="load"
                :infinite-scroll-disabled="disabled"
                :infinite-scroll-distance="10"
                :infinite-scroll-immediate="false"
                ref="listCard">
            <div
                    class="listCardItem"
                    v-for="(item, index) in listCardData"
                    :key="index"
                    @click="clickListCardItem(item.id)">
                <div class="image">
                    <img
                            :src="(item.picUrl || item.coverImgUrl) + '?param=400y400'"
                            alt=""
                    />
                    <el-image :src="src"></el-image>
                </div>
                <div class="title">{{ item.name }}</div>
            </div>
            <p class="pp" v-if="loading" style="text-align: center">加载中...</p>
<!--            <p class="pp" v-else>没有更多了</p>-->
        </div>
    </div>
</template>

<script>
    export default {
        name: "ListCard",
        props: {
            listCardData: {
                type: Array,
                default() {
                    return [];
                },
            },
            // 是否使用上拉触底事件
            isMore: {
                type: Boolean,
                default() {
                    return false;
                },
            },
            // 是否使用上拉触底事件
            isLoad: {
                type: Boolean,
                default() {
                    return false;
                },
            },
        },
            data() {
                return {
                    // 无限滚动是否可用
                    disabled: true,
                    loading: false,
                    src: require('./../../img/YlnqK6Ow3X.png')
                };
            },
            computed: {
                // noMore() {
                //     return this.listCardData.length === 0
                // },
                // disabled() {
                //     return this.loading || this.noMore
                // }
            },
            methods: {
                clickListCardItem(id) {
                    this.$emit("clickListCardItem", id);
                },
                // // 上拉触底触发
                load() {
                    console.log("滑动到底部");
                    // this.disabled = true;
                    this.loading = true;
                    setTimeout(()=>{
                        this.$emit("bottomLoad");
                    },4000)
                    // 触发load后加载数据 期间不允许再次触发load事件
                    this.disabled = true;
                }
            },
            watch: {
                //   数据更新后再次运行触发load事件
                listCardData() {
                    if (this.isLoad === true) {
                        this.disabled = this.listCardData.length === 0;
                    }
                },
            },
    };
</script>

<style scoped>
    .listCard {
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0;
    }

    p {
        text-align: center;

    }

    .infinite-list-wrapper {
        height: 100%;
    }

    .listCardItem {
        /*height: 205px;*/
        width: 18.4%;
        margin: 0 2% 20px 0;
        overflow: hidden;
        cursor: pointer;
    }

    .listCardItem:nth-child(5n) {
        margin-right: 0;
    }

    .image {
        width: 100%;
        padding-bottom: 100%;
        height: 0;
        position: relative;
    }

    .image::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: url("./../../img/55.png") no-repeat center;
        background-size: contain;
        border-radius: 10px;
        z-index: -1;
        -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
        filter: grayscale(100%);
    }

    .image img {
        width: 100%;
        border-radius: 10px;
    }

    .title {
        margin-top: 8px;
        padding: 0 2px;
        font-size: 12px;
        color: black;
        line-height: 17px;
        /* 两行溢出 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .listCardItem .image .el-image {
        position: absolute;
        top: 30%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 80px;
        opacity: 0;
        /*开始透明度为0*/
        transition: opacity 1s;
    }

    .listCardItem .image:hover .el-image {
        opacity: 1;
    }
    .listCard .pp{
        text-align: center;
        margin: auto;
        display: block;
        padding: 2px 0;
    }
</style>